<template>
  <a-col :span="8" class="main-aside-container">
    <div class="banner-aside">
      <div class="banner-aside-item">
        <img src="/assets/banner-s-daily.png" alt="">
      </div>
      <div class="banner-aside-item">
        <img src="/assets/banner-s-club.png" alt="">
      </div>
      <div class="banner-aside-item">
        <img src="/assets/banner-s.png" alt="">
      </div>
      <div class="banner-aside-item">
        <img src="/assets/banner-s-5.png" alt="">
      </div>
    </div>
    <div class="recommended-authors">
      <div class="recommended-authors-header">
        <h3>推荐作者</h3>
        <div class="authors-reload">
          <i-ep-refresh />
          <small>换一批</small>
        </div>
      </div>
      <div class="recommended-authors-main">
        <div class="authors-main-item" v-for="(item, index) in [1, 2, 3, 4, 5]">
          <a-avatar :size="44">
            <template #icon>
              <img src="/assets/default-avatar.png" alt="avatar">
            </template>
          </a-avatar>
          <div class="authors-info">
            <div class="authors-name">
              <span>小埋</span>
              <NuxtLink>+ 关注</NuxtLink>
            </div>
            <p>写了269.3k字 · 31.6k喜欢</p>
          </div>
        </div>
      </div>
    </div>
  </a-col>
</template>


<script setup>

const banner = ref([
  '/assets/banner-s-daily.png',
  '/assets/banner-s-club.png',
  '/assets/banner-s.png',
  '/assets/banner-s-5.png'
]);

</script>


<style lang="less" scoped>
.main-aside-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

  .banner-aside {
    width: 100%;

    img {
      min-height: 39px;
      width: 100%;
      margin-bottom: 6px;
      border-radius: 4px;
    }
  }

  .recommended-authors {
    width: 100%;
    margin-top: 30px;

    .recommended-authors-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 10px;

      .authors-reload {
        display: flex;
        align-items: center;
        cursor: pointer;
        color: darkturquoise;
      }
    }

    .authors-main-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 10px;

      .authors-info {
        margin-left: 10px;
        flex: 1;

        .authors-name {
          display: flex;
          justify-content: space-between;

          a {
            color: #00BB29;
          }
        }

        p {
          margin-top: 2px;
          font-size: 12px;
          color: #969696;
        }
      }
    }
  }
}

::-webkit-scrollbar {
  display: none;
}
</style>